<template>
  <div class="home">
    <div class="wrapper">
      <div class="homeIntel">
        <span>今日：0</span>s<span class="line">|</span>
        <span>昨日：0</span><span class="line">|</span>
        <span>最高日：0</span><span class="line">|</span>
        <span>帖子：0</span><span class="line">|</span>
        <span>会员：0</span><span class="line">|</span>
        <span>新会员：<span class="newMember">赤子乘法</span></span>
      </div>

      <div class="message" v-for="(group, key) in list" :key="group.id">
        <div class="title">
          <span @click="handleRouteChange(group)">{{group.title}}</span>
        </div>
        <div class="stick">
          <dl 
            class="area" 
            v-for="item of group.children" 
            :key="item.id">
            <dt class="area-pic" @click="handleRouteChange(item)">
              <img :src="item.imgUrl" :alt="item.title"/>
            </dt>
            <dd class="area-desc">
              <h5 class="desc-title" @click="handleRouteChange(item)">
                {{item.title}}
              </h5>
              <div class="desc-count">
                <span>主题：</span><span>{{item.theme}}</span>,
                <span>帖子：</span><span>{{item.total}}</span>
              </div>
              <div class="recentRequest" v-show="item.lastRequestTime">
                最后回复:
                <span>{{item.lastRequestTime}}</span>
              </div>
            </dd>
          </dl>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Home',
  data () {
    return {
      list: {}
    }
  },
  methods: {
    handleRouteChange (item) {
      this.$router.push({path: 'detail' + item.routes, query: {data: item.id}});
      this.$route.meta.title = item.title + ' - 核客论坛 - Powered by phpwind';
    },
    getListInfo () {
      const _this = this;
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          _this.list = response.data.data
        }
      })
    }
  },
  mounted () {
    this.getListInfo();
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .home
    container()
    .wrapper
      wrapper()
      .homeIntel
        padding-top: .1rem
        color: $font-deep
        line-height: $spaceHeight
        font-size: 0
        border-bottom: .02rem solid $borderColor
        background-color: $bgcolor-all
        span
          font-size: .24rem
          display: inline-block
          margin: 0 .1rem
        .line
          color: #ccc
          font-size: .26rem
        .newMember
          color: $font-blue
        .newMember:hover
          text-decoration: underline
          cursor: pointer
      .message
        border-bottom: .02rem solid $borderColor
        border: .01rem solid $borderLight
        background-color: $bgcolor-white
        border-left: .01rem solid #efefef
        border-right: .01rem solid #efefef
        .title
          border-bottom: .02rem solid $borderColor
          line-height: .64rem
          color: $font-blue
          font-weight: bold
          font-size: .24rem
          background: $bgcolor-title
          padding-left: .2rem
        .title span:hover
          text-decoration: underline
        .stick
          display: flex
          flex-wrap: wrap
          .area:nth-child(3)
            border-top: .01rem dashed $borderColor
          .area:nth-child(4)
            border-top: .01rem dashed $borderColor
          .area:nth-child(5)
            border-top: .01rem dashed $borderColor
          .area
            width: 50%
            height: 1.66rem
            display: flex
            font-size: .24rem
            color: $font-deep
            .area-pic
              margin: .22rem .26rem .22rem .36rem
              cursor: pointer
            .area-desc
              display: flex
              flex-direction: column
              justify-content: center
              .desc-title
                font-weight: bold
                margin-bottom: .1rem
                color: $font-black
              .desc-title:hover
                text-decoration: underline
              .desc-count
                margin-bottom: .1rem
                span
                  display: inline-block
                  margin-right: .04rem
              .desc-count span:nth-child(even),
              .recentRequest span:nth-child(1)
                color: $font-black
              .recentRequest span:hover
                text-decoration: underline
</style>
